<!--多图循环轮播-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多图循环轮播</title>
		<style type="text/css">
#divbox{
	width: 900px;
	height: 200px;
	margin: 0 auto;
	overflow: hidden;
}
#conall{
	width: 3000px;
}
#con,#con2{
	width: 1500px;
	float: left;
}
#con>div,#con2>div{
	float: left;
}

#con>div>img,#con2>div>img{
	width: 300px;
	height: 200px;
}
#div1,#div2,#div3,#div4,#div5{
	width: 300px;
	height: 200px;
	font-size: 120px;
}
#div1{background-color: red;}
#div2{background-color: green}
#div3{background-color: yellow;}
#div4{background-color: blue;}
#div5{background-color: orange;}
.p_text{font-size: 20px;}
.center{text-align: center;}
		</style>
	</head>
	<body>
<div id="divbox">
	<div id="btn1"></div>
	<div id="btn2"></div>
	<div id="conall" >
		<div id="con" >
		    <div id="div1"><p class="p_text">图片1</p></div>
		    <div id="div2"><p class="p_text">图片2</p></div>
		    <div id="div3"><p class="p_text">图片3</p></div>
		    <div id="div4"><p class="p_text">图片4</p></div>
		    <div id="div5"><p class="p_text">图片5</p></div>
		</div>
		<div id="con2"></div>
	</div>
</div>
<div class="center">
	<br />
	<input type="button" onclick="pveOne()" value="前一张" />
	<input type="button" onclick="nextOne()" value="后一张" />
</div>
	</body>
<script type="text/javascript">
	con2.innerHTML=con.innerHTML;
	var oneWidth=300;
	var time=5;
	var time2=2000;
	var myscroll;
	var setout;
	divbox.scrollLeft=0;
	//启动滑动
	function starMove(){
		divbox.scrollLeft++;
		myscroll=setInterval("scrollL()",time);
	}
	//向左滑动
	function scrollL(){
		if(divbox.scrollLeft % oneWidth ==0){
			clearInterval(myscroll);
			setout=setTimeout("starMove()",time2);
			console.log(divbox.scrollLeft);
		}else{
			divbox.scrollLeft++;
			if(divbox.scrollLeft >= con.offsetWidth){
				divbox.scrollLeft=0;
			}
		}
	}
	//向右滑动(点击调用)
	function scrollR(){
		if(divbox.scrollLeft % oneWidth ==0){
			clearInterval(myscroll);
			setout=setTimeout("starMove()",time2);
			console.log(divbox.scrollLeft);
		}else{
			divbox.scrollLeft=divbox.scrollLeft-6;
			if(divbox.scrollLeft ==0){
				divbox.scrollLeft=con.offsetWidth;
			}
		}
	}
	//点击前一张
	function pveOne(){
		if(divbox.scrollLeft % oneWidth !=0){
			var yu=divbox.scrollLeft % oneWidth;
			divbox.scrollLeft=divbox.scrollLeft-yu;
		}else{
			if(divbox.scrollLeft ==0){
				divbox.scrollLeft=con.offsetWidth;
			}
			divbox.scrollLeft=divbox.scrollLeft-6;
			clearInterval(myscroll);
			clearTimeout(setout);
			myscroll=setInterval("scrollR()",time);
		}
	}
	//向左滑动(点击调用)
	function scrollLd(){
		if(divbox.scrollLeft % oneWidth ==0){
			clearInterval(myscroll);
			setout=setTimeout("starMove()",time2);
			console.log(divbox.scrollLeft);
		}else{
			divbox.scrollLeft=divbox.scrollLeft+6;
			if(divbox.scrollLeft >= con.offsetWidth){
				divbox.scrollLeft=0;
			}
		}
	}
	//点击后一张
	function nextOne(){
		divbox.scrollLeft=divbox.scrollLeft+6;
		clearInterval(myscroll);
		clearTimeout(setout);
		myscroll=setInterval("scrollLd()",time);
	}
	//鼠标移入
	divbox.onmouseover=function(){
		clearInterval(myscroll);
		clearTimeout(setout);
	}
	//鼠标移出
	divbox.onmouseout=function(){
		clearInterval(myscroll);
		clearTimeout(setout);
		myscroll= setInterval('scrollL()',time);
	}
	setTimeout("starMove()",1000);
	
</script>
</html>
